<template>
  <div>
    <el-tabs v-model="searchForm.tab" class="demo-tabs" @tab-change="getData">
      <el-tab-pane
        :label="item.name"
        :name="item.value"
        v-for="item in tabList"
      />
    </el-tabs>
    <el-card>
      <Search @search="getData" @reset="resetSearchForm" style="width: 100%">
        <SearchItem title="关键词">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入商品名"
            @keyup.enter="getData"
          ></el-input>
        </SearchItem>
        <template v-slot:show>
          <SearchItem title="分类">
            <el-select
              v-model="searchForm.category_id"
              clearable
              placeholder="请选择分类"
            >
              <el-option
                v-for="item in catesList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </SearchItem>
        </template>
      </Search>

      <div class="noptice-header">
        <el-button type="primary" size="small" @click="createClick"
          >新增</el-button
        >
        <el-button
          type="danger"
          size="small"
          @click="delAllClick"
          :disabled="ids.length === 0"
          >批量删除</el-button
        >
        <el-button type="primary" plain size="small" @click="changeAllClick(1)"
          >上架</el-button
        >
        <el-button type="primary" plain size="small" @click="changeAllClick(0)"
          >下架</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="refresh"
          style="margin-left: 70%"
        >
          <el-icon>
            <Refresh />
          </el-icon>
        </el-button>
      </div>

      <el-table :data="tableList" @selection-change="handleDeleteAll">
        <el-table-column type="selection" width="55" />
        <el-table-column label="商品" prop="">
          <template #default="{ row }">
            <div class="flex">
              <el-image
                class="mr-3 rounded"
                :src="row.cover"
                fit="cover"
                :lazy="true"
                style="width: 50px; height: 50px"
              />
              <div class="ml-5">
                <h6>{{ row.title }}</h6>
                <p>￥{{ row.min_price }} | ￥{{ row.min_oprice }}</p>
                <p class="text-gray-400">
                  分类：{{ row.category?.name || "" }}
                </p>
                <p class="text-gray-400">创建时间：{{ row.update_time }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实际销量" prop="sale_count" width="150">
        </el-table-column>
        <el-table-column label="商品状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'danger'" size="small">{{
              row.status ? "上架" : "仓库"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="120" align="center">
          <template #default="{ row }">
            <div class="flex flex-col" v-if="row.ischeck == 0">
              <el-button type="success" size="small" plain>审核通过</el-button>
              <el-button class="mt-2 !ml-0" type="danger" size="small" plain
                >审核拒绝</el-button
              >
            </div>
            <span v-else>{{ row.ischeck == 1 ? "通过" : "拒绝" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="总库存"
          prop="stock"
          width="150"
        ></el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              text
              type="primary"
              size="small"
              @click="editNoticeClick(scope.row)"
              >修改</el-button
            >
            <el-button
              text
              size="small"
              @click="setSkus(scope.row)"
              :type="scope.row.goods_skus.length > 0 ? 'primary' : 'danger'"
              >商品规格</el-button
            >
            <el-button
              text
              :type="scope.row.goods_banner.length > 0 ? 'primary' : 'danger'"
              size="small"
              @click="setBanners(scope.row)"
              >设置轮播图</el-button
            >
            <el-button
              text
              size="small"
              :type="scope.row.content ? 'danger' : 'primary'"
              @click="setGoodsContent(scope.row)"
              >商品详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex items-center justify-center mt-3">
        <el-pagination
          background
          layout="prev, pager,next"
          :total="total"
          :current-page="page"
          :page-size="limit"
          @current-change="changePage"
        />
      </div>
    </el-card>

    <Drawer
      ref="DrawerRef"
      :title="title === 'add' ? '添加商品' : '修改商品'"
      @submit="submit"
    >
      <el-form ref="formRef" :model="fromData" label-width="100px">
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="fromData.title" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="商品图片" prop="cover">
          <ChooseImage v-model="fromData.cover"></ChooseImage>
        </el-form-item>
        <el-form-item label="商品分类" prop="role_category_idid">
          <el-select v-model="fromData.category_id" placeholder="请选择分类">
            <el-option
              v-for="item in catesList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            >
              {{ item.name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item label="商品描述" prop="desc">
          <el-input
            v-model="fromData.desc"
            placeholder="选填，商品卖点简述，例如：此款商品美观大方 性价比较高 不容错过"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品单位" prop="unit">
          <el-input
            v-model="fromData.unit"
            placeholder="请输入商品单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="总库存" prop="stock">
          <el-input v-model="fromData.stock" type="Number">
            <template #append>件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="库存预警" prop="min_stock">
          <el-input v-model="fromData.min_stock" type="Number">
            <template #append>件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="最低销售价" prop="min_price">
          <el-input v-model="fromData.min_price" type="Number">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="最低原价" prop="min_oprice">
          <el-input v-model="fromData.min_oprice" type="Number">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="库存显示" prop="stock_display">
          <el-radio-group v-model="fromData.stock_display" size="small">
            <el-radio :label="0" border>隐藏</el-radio>
            <el-radio :label="1" border>显示</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否上架" prop="status">
          <el-radio-group v-model="fromData.status" size="small">
            <el-radio :label="0" border>放入仓库</el-radio>
            <el-radio :label="1" border>立即上架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Drawer>
    <banners ref="bannersRef" @submit="getData"></banners>
    <content ref="contentRef" @submit="getData"></content>
    <sku ref="skusRef" @submit="getData"></sku>
  </div>
</template>

<script setup>
import Drawer from "@/components/Drawer/index.vue";
import ChooseImage from "@/components/ChooseImage/ChooseImage.vue";
import Search from "@/components/Search/Search.vue";
import SearchItem from "@/components/Search/SearchItem.vue";
import banners from "./banners.vue";
import content from "./content.vue";
import sku from "./sku.vue";
import {
  getGoodsList,
  addGoods,
  editGoods,
  delGoods,
  changGoodsStatus,
} from "@/api/goods";
import { ref } from "vue";
import { useInitTable, useInitForm } from "@/composables/useCommon.js";

let catesList = ref([]); // 分类列表

const {
  tableList,
  page,
  total,
  limit,
  searchForm,
  getData,
  resetSearchForm,
  changePage,
  refresh,
  ids,
  handleDeleteAll,
  delAllClick,
  changeAllClick,
} = useInitTable({
  searchForm: {
    title: "",
    tab: "all",
    category_id: "",
  },
  getList: getGoodsList,
  del: delGoods,
  changeAll: changGoodsStatus,
  onGetListSuccess: (res) => {
    total.value = res.data.totalCount;
    catesList.value = res.data.cates;
    tableList.value = res.data.list;
  },
});

const {
  fromData,
  editId,
  title,
  formRef,
  rules,
  DrawerRef,
  createClick,
  resetForm,
  submit,
  editNoticeClick,
} = useInitForm({
  fromData: {
    title: "", // 商品名称
    category_id: null, //商品分类
    cover: "", //商品封面
    desc: 1, // 商品描述
    unit: "件", // 商品单位 kg
    stock: 200, //总库存
    min_stock: 10, //库存预警
    status: 1, // 	是否上架 0仓库1上架
    stock_display: 1, // 库存显示 0隐藏1禁用
    min_price: 1, //最低销售价
    min_oprice: 100, //最低原价
  },
  create: addGoods,
  updata: editGoods,
  getData: getData,
});
const tabList = ref([
  {
    name: "全部",
    value: "all",
  },
  {
    name: "审核中",
    value: "checking",
  },
  {
    name: "出售中",
    value: "saling",
  },
  {
    name: "已下架",
    value: "off",
  },
  {
    name: "库存预警",
    value: "min_stock",
  },
  {
    name: "回收站",
    value: "delete",
  },
]);

let showSearch = ref(false);

// 轮播图
const bannersRef = ref(null);
const setBanners = (row) => {
  bannersRef.value.open(row);
};
// 设置商品规格
let skusRef = ref(null);
const setSkus = (row) => {
  skusRef.value.open(row);
};
// 设置商品详情
const contentRef = ref(null);
const setGoodsContent = (row) => {
  contentRef.value.open(row);
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
